<template>
  <div class="wrapper">
    <catalog></catalog>
    <example>
      <template v-slot:title>
        基本用法
      </template>
      <l-input v-model="inputModel1" width="200px" placeholder="我想不到写点什么了"></l-input>
      <template v-slot:code>
        {{InputExample.example1}}
      </template>
    </example>

    <example>
      <template v-slot:title>
        number类型和password类型的输入框
      </template>
      <l-input v-model="inputModel2" width="200px" type="number" min="10" max="20"></l-input>
      <l-input v-model="inputModel3" width="200px" type="password"></l-input>
      <template v-slot:code>
        {{InputExample.example2}}
      </template>
    </example>
  </div>
</template>

<script>
import Catalog from '../components/Catalog';
import Example from '../components/Example';
import InputExample from './Input-Example';

export default {
  name: 'Input',
  components: {
    Catalog,
    Example
  },
  data () {
    return {
      inputModel1: '',
      inputModel2: '',
      inputModel3: '',
      InputExample: InputExample
    };
  }
};
</script>
